<template>
  <div>
    <span ref="spanref">span {{comCount}} </span>
    <test-com ref="testref"></test-com>
    <button @click="update">修改儿子的数据</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import TestCom, { TestType } from './TestCom.vue'
// 需要指定普通dom元素的类型
const spanref = ref<HTMLSpanElement | null>(null)
// 如果是一个组件，需要先用keyof获取到组件的类型，然后再用InstanceType获取这个组件构造函数的返回值实例类型，实际上就拿到了组件的类型了
const testref = ref<InstanceType<typeof TestCom>>()
// 用自定义的组件类型来做
// const testref = ref<TestType | null>(null)

const update = () => {
  // testref.value?.updateCount(3)
  testref.value!.count = 666
}

onMounted(() => {
  console.log(spanref)
  console.log(testref.value!.count)
})
const comCount = computed(() => {
  return testref?.value?.count
})

</script>

<style scoped>

</style>
